<template>
  <div class="box">
    <div class="topBox">
      <div class="boxSearch">
        <span>查询：</span>
        <el-input v-model="input" placeholder="请输入内容" class="search" size="small"></el-input>
        <el-button type="primary" size = 'small' @click="search">搜索</el-button>
      </div>
      <el-button type="primary" size = 'small' style="width: 110px" @click="dialogFormVisible = true">添加</el-button>
      <!--  添加弹框-->
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible" width="500px">
        <el-form >
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="name" ></el-input>
          </el-form-item>
          <el-form-item label="词" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="region" ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  <el-table
      :data="showtableData"
      border
      style="width: 1121px"
  >
    <el-table-column
        prop="name"
        label="姓名"
        min-width="45">
    </el-table-column>
    <el-table-column
        prop="word"
        label="词"
        min-width="45">
    </el-table-column>

    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope" fixed="true" >
        <el-button @click="modify(scope.row)" type="text" size="small">修改</el-button>
        <!--      修改弹框-->
        <el-dialog title="收货地址" :visible.sync="modifyVisible" width="500px" append-to-body>
          <el-form >
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="modifyName" ></el-input>
            </el-form-item>
            <el-form-item label="词" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="modifyRegion" ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="modifyCancel">取 消</el-button>
            <el-button type="primary" @click="modifyConfirm(scope.row)">确 定</el-button>
          </div>
        </el-dialog>
        <el-button type="text" size="small" class="delete" @click="open(scope.row)">删除</el-button>
<!--        delItem(scope.$index,tableData)-->
      </template>
    </el-table-column>
  </el-table>
<!--分页-->
    <el-pagination
        class="pagination"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="currentItem"
        layout="total, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>
</template>
<script>
  import {
    addTableDataList, 
    getTableDataList,
    searchTableDataList,
    deleteTableDataList,
    updateTableDataList
  } from "../api/api";

  export default {
  name: "Zsgc",
  data() {
    return {
      form:'',
      input: '',
      showtableData:[],
      tableData: [],
      // dialogTableVisible: false,
      dialogFormVisible: false,
        name: '',
        region:'',
      formLabelWidth: '120px',
      modifyVisible:false,
      modifyName:'',
      modifyRegion:'',
      currentData:{},
      currentPage: 1,
      total:0,
      currentItem:2,
      rows:[],
      searchRows:[],
      addRows:[]
    }
  },
  created() {
    this.getTableData()

  },
  methods: {
    async getTableData() {
      try {
        let data = await getTableDataList()
        if(data.status == 200){
          console.log(data);
          this.tableData = data.data
          this.rows=data.data
          this.total=this.rows.length
          this.searchRows=this.tableData
          this.addRows=this.tableData

          this.showtableData=this.rows.slice((this.currentPage-1)*this.currentItem,(this.currentPage-1)*this.currentItem+this.currentItem)
        }
      }
      catch (e) {
        console.log(e)
      }
    },

    //添加取消
    cancel() {
      this.dialogFormVisible = false;
      this.name=''
      this.region=''
    },
    //修改取消
    modifyCancel(){
      this.modifyVisible = false;
      this.modifyName=''
      this.modifyRegion=''
    },

    //增加
    async confirm() {
      try {
        if(this.name&&this.region){
          const row = {
            name: this.name, word: this.region
          }
          //row可以分开传值，不需要改成json格式，修改一样
          let data = await addTableDataList(JSON.stringify(row))
          if(data.status == 200){
            console.log(data)
          }
          this.dialogFormVisible = false;
          this.addRows.unshift(row)
          this.rows=this.addRows
          this.total=this.rows.length
          this.showtableData=this.rows.slice(0,0+this.currentItem)
          this.name=''
          this.region=''
        }else{
          this.$message({
            type: 'warning',
            message: '姓名和词不能为空！',
          });
        }
      }
      catch (e) {
        console.log(e)
      }
    },
    //修改确定
    modifyConfirm(row){
      this.modifyVisible = false;
      this.updateList(row.id)
      this.showtableData.forEach((value) =>{
        if (this.currentData.id == value.id){
          value.name=this.modifyName
          value.word =this.modifyRegion
        }
      })

    },
    // 修改
    async updateList(id){
      let msg = {
        id:id,
        name:this.modifyName,
        word:this.modifyRegion
      }
      try{
        let data = await updateTableDataList(JSON.stringify(msg))
        if(data.status == 200){
          console.log(data);
        }
      }catch(e){
        console.log(e);
      }
    },
    open(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        this.deleteList(row.id)
        var deleteArr=[]
        this.rows.filter(item=>{
          if(item.id==row.id){
            console.log(item)
          }else{
            deleteArr.push(item)
          }
          return deleteArr
        })
        this.total=deleteArr.length
        this.rows=deleteArr
        this.searchRows=deleteArr
        this.addRows=deleteArr
        this.showtableData=deleteArr.slice((this.currentPage-1)*this.currentItem,(this.currentPage-1)*this.currentItem+this.currentItem)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async deleteList(id){
      try {
        let data = await deleteTableDataList(id)
        if(data.status == 200){
          console.log(data);
        } 
      }
      catch(e){
        console.log(e);
      }
    },
    //搜索
    async search(){
      try{
        let likeWord = this.input
        let data = await searchTableDataList(likeWord)
        if(data.status == 200){
          console.log(data);
        }
      }catch(e){
        console.log(e);
      }



      this.currentPage=1
      this.showtableData=[]
      this.rows=[]
      this.searchRows.forEach(item=>{
        if(item.name.includes(this.input)){
          this.rows.push(item)
        }
      })
      this.total=this.rows.length
      this.showtableData=this.rows.slice((this.currentPage-1)*this.currentItem,(this.currentPage-1)*this.currentItem+this.currentItem)


    },
    //修改
    modify(row){
      this.modifyVisible = true,
          this.currentData=row;
      // console.log(row.id)
      this.showtableData.forEach((value)=>{
        if (value.id == row.id){
          this.modifyName = value.name
          this.modifyRegion = value.word
        }
      })
    },
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`+111);
    // },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage=val;
      this.showtableData=this.rows.slice((val-1)*this.currentItem,(val-1)*this.currentItem+this.currentItem)
    }
}}
</script>

<style scoped lang="less">
  .box{
    margin-top: 50px;
    margin-left: 295px;
    /deep/.el-table--enable-row-transition {
      width: 1121px !important;
    }
  }
  .search {
    width:200px;
    margin-right: 7px;
    /*display: block;*/
  }
  .boxSearch {

    span {
        font-size: 15px;
        color: #cccccc;

    }
  }
  .topBox{
    margin-bottom: 15px;
    width: 98%;
    display: flex;
    justify-content: space-between;
  }
  .el-form-item__label {
    width: 75px !important;
  }
  .el-form-item{
    width:380px;
  }
  /deep/.el-table__header .el-table_1_column_1,
  /deep/.el-table__header .el-table_1_column_2,
  /deep/.el-table__header .el-table_1_column_3{
    background-color: #f8f8f9;
  }
  .delete {
    margin-left: 10px ;
  }
  /deep/.el-dialog {
    box-shadow:none;
  }
  .pagination {
    margin-top: 10px;
    margin-right: 20px;
    float: right;
  }
</style>